<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单WebSocket测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #log {
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: auto;
            margin-bottom: 20px;
            font-family: monospace;
        }
        button {
            padding: 8px 15px;
            margin-right: 10px;
        }
        input {
            padding: 8px;
            width: 300px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>简单WebSocket测试</h1>
    
    <div>
        <label>WebSocket URL:</label>
        <input type="text" id="wsUrl" value="ws://localhost:8080/wsraw">
        <button id="connectBtn">连接</button>
        <button id="disconnectBtn" disabled>断开</button>
    </div>
    
    <h3>日志：</h3>
    <div id="log"></div>
    
    <div>
        <input type="text" id="messageInput" placeholder="输入消息" disabled>
        <button id="sendBtn" disabled>发送</button>
    </div>
    
    <script>
        let socket = null;
        
        const connectBtn = document.getElementById('connectBtn');
        const disconnectBtn = document.getElementById('disconnectBtn');
        const wsUrlInput = document.getElementById('wsUrl');
        const messageInput = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendBtn');
        const logDiv = document.getElementById('log');
        
        function log(message, color = 'black') {
            const time = new Date().toLocaleTimeString();
            const msgDiv = document.createElement('div');
            msgDiv.innerHTML = `<span style="color: #888;">[${time}]</span> <span style="color: ${color};">${message}</span>`;
            logDiv.appendChild(msgDiv);
            logDiv.scrollTop = logDiv.scrollHeight;
        }
        
        connectBtn.addEventListener('click', function() {
            const url = wsUrlInput.value.trim();
            if (!url) {
                alert('请输入WebSocket URL');
                return;
            }
            
            log('正在连接到: ' + url, 'blue');
            
            try {
                socket = new WebSocket(url);
                
                socket.onopen = function(event) {
                    log('连接已打开', 'green');
                    connectBtn.disabled = true;
                    disconnectBtn.disabled = false;
                    messageInput.disabled = false;
                    sendBtn.disabled = false;
                    updateSocketStatus(true);
                };
                
                socket.onmessage = function(event) {
                    log('收到消息: ' + event.data, 'purple');
                };
                
                socket.onclose = function(event) {
                    log('连接已关闭。代码: ' + event.code + ', 原因: ' + event.reason, 'orange');
                    
                    let closeReason = "";
                    switch(event.code) {
                        case 1000: closeReason = "正常关闭"; break;
                        case 1001: closeReason = "离开页面"; break;
                        case 1002: closeReason = "协议错误"; break;
                        case 1003: closeReason = "不支持的数据"; break;
                        case 1005: closeReason = "无状态码"; break;
                        case 1006: closeReason = "异常关闭，可能是服务器未运行或配置问题"; break;
                        case 1007: closeReason = "数据格式不一致"; break;
                        case 1008: closeReason = "策略违规"; break;
                        case 1009: closeReason = "消息过大"; break;
                        case 1010: closeReason = "客户端要求扩展但服务器不支持"; break;
                        case 1011: closeReason = "服务器内部错误"; break;
                        default: closeReason = "未知原因";
                    }
                    log('关闭原因: ' + closeReason, 'orange');
                    
                    connectBtn.disabled = false;
                    disconnectBtn.disabled = true;
                    messageInput.disabled = true;
                    sendBtn.disabled = true;
                    socket = null;
                    updateSocketStatus(false);
                };
                
                socket.onerror = function(error) {
                    log('连接错误: ' + (error.message || '未知错误'), 'red');
                    console.error('WebSocket错误', error);
                };
            } catch (e) {
                log('创建WebSocket连接失败: ' + e.message, 'red');
            }
        });
        
        disconnectBtn.addEventListener('click', function() {
            if (socket) {
                log('正在断开连接...', 'blue');
                socket.close();
            }
        });
        
        sendBtn.addEventListener('click', function() {
            if (!socket) {
                log('没有活动的WebSocket连接', 'red');
                return;
            }
            
            const message = messageInput.value.trim();
            if (!message) {
                alert('请输入消息');
                return;
            }
            
            try {
                socket.send(message);
                log('已发送: ' + message, 'green');
                messageInput.value = '';
            } catch (e) {
                log('发送消息失败: ' + e.message, 'red');
            }
        });
        
        // 允许按Enter键发送消息
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !sendBtn.disabled) {
                sendBtn.click();
            }
        });
        
        // 添加测试JSON按钮
        const testJsonBtn = document.createElement('button');
        testJsonBtn.textContent = '发送测试JSON';
        testJsonBtn.disabled = true;
        testJsonBtn.addEventListener('click', function() {
            if (!socket) return;
            
            const testData = {
                action: 'test',
                customerId: 'cs001',
                timestamp: new Date().getTime()
            };
            
            try {
                const json = JSON.stringify(testData);
                socket.send(json);
                log('已发送测试JSON: ' + json, 'green');
            } catch (e) {
                log('发送测试JSON失败: ' + e.message, 'red');
            }
        });
        
        // 在发送按钮后添加测试JSON按钮
        sendBtn.parentNode.insertBefore(testJsonBtn, sendBtn.nextSibling);
        
        // 更新WebSocket状态变更的函数
        function updateSocketStatus(connected) {
            testJsonBtn.disabled = !connected;
        }
    </script>
</body>
</html> 